<template>
  <div class="main">
    <!-- 左侧导航start -->
    <div class="left" :style="{ backgroundColor: themeColor,width:!isCollapse?'200px':'auto' }">
      <div class="logo">Bing</div>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :background-color="themeColor"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="isCollapse"
        router
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span>账号管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/layout/role">角色管理</el-menu-item>
            <el-menu-item index="/layout/manage">账号管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-office-building"></i>
            <span>客房管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">类型管理</el-menu-item>
            <el-menu-item index="2-2">客房管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-user-solid"></i>
            <span>客户管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1">客户管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>权限管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1">权限管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
    <!-- 左侧导航end -->

    <!-- 右侧导航start -->
    <div class="right">
      <div class="nav" :style="{ backgroundColor: themeColor }">
        <div class="icon" @click="isCollapse=!isCollapse">
          <i :class="isCollapse?'el-icon-s-fold':'el-icon-s-unfold'"></i>
        </div>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          :background-color="themeColor"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1"
            ><i class="el-icon-s-home"></i>Home</el-menu-item
          >
          <el-menu-item index="2"
            ><i class="el-icon-chat-dot-square"></i>Message</el-menu-item
          >
          <el-menu-item index="3"
            ><i class="el-icon-message"></i>Email</el-menu-item
          >
          <el-submenu index="4">
            <template slot="title"
              ><i class="el-icon-s-help"></i>Theme</template
            >
            <el-menu-item
              :index='4-index'
              @click="changeColor(item.value)"
              v-for="(item, index) in theme"
              :key="index"
              >{{ item.name }}</el-menu-item
            >
            <!-- <el-menu-item index="4-2">灰色主题</el-menu-item>
            <el-menu-item index="4-3">红色主题</el-menu-item>
            <el-menu-item index="4-4">黑色主题</el-menu-item>
            <el-menu-item index="4-5">绿色主题</el-menu-item> -->
          </el-submenu>
          <el-submenu index="5">
            <template slot="title"
              ><i class="el-icon-user-solid"></i>管理员</template
            >
            <el-menu-item index="5-1">个人中心</el-menu-item>
            <el-menu-item index="5-2">修改密码</el-menu-item>
            <el-menu-item index="5-3" @click="exit">退出系统</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <!-- 内容区域start -->
      <div class="content">
        <!-- 路由视图 -->
        <router-view></router-view>
      </div>
      <!-- 内容区域end -->
    </div>
    <!-- 右侧导航start -->
  </div>
</template>
<script>
// 导入vuex的映射函数
import { mapState } from "vuex";
export default {
  data() {
    return {
      activeIndex2: "1",
      themeColor: localStorage.getItem('theme') || "#304156", //主题颜色 
      isCollapse: false, //是否折叠菜单栏
    };
  },
  computed: {
    ...mapState("theme", ["theme"]),
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 切换主题颜色
    changeColor(color) {
      this.themeColor = color;
      localStorage.setItem('theme',color);//缓存已选的颜色
    },
    // 退出系统方法   
    exit() {
      this.$router.push('/');
    }
  },
};
</script>

<style lang='scss' >
@import "../assets/css/index.scss";
</style>